<template>

    <div>
        <el-tabs v-model="activeName2" type="card" >
            <el-tab-pane label="产品" name="first">

            </el-tab-pane>

        </el-tabs>
        <el-form :inline="true" ref="form" :model="form">
            <el-form-item label="名称" prop="name">
                <el-input placeholder="名称" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="主要技术路径" prop="region">
                <el-select v-model="form.region" placeholder="选择主要技术路径">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="编辑人" prop="editMan">
                <el-input placeholder="编辑人" v-model="form.editMan"></el-input>
            </el-form-item>
            <el-form-item label="负责人" prop="fzMan">
                <el-input placeholder="负责人" v-model="form.fzMan"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="resetForm('form')">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查找</el-button>
            </el-form-item>
        </el-form>
        <div class="dateMsg">总计<b>567</b>条数据</div>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="type" label="主要技术路径">
                </el-table-column>
                <el-table-column prop="shangshi" label="提交时间">
                </el-table-column>
                <el-table-column prop="field" label="编辑人">
                </el-table-column>
                <el-table-column prop="time" label="负责人">
                </el-table-column>
                <el-table-column prop="date" label="操作" mi>
                    <template scope="scope">
                        <el-button  type="text" size="small" @click="showDio('checkDiolage')">审核</el-button>
                        <!--<el-button type="text" size="small" @click="showDio('editDiolage')">编辑</el-button>-->
                        <el-button type="text" size="small" @click="del">弃置此副本</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div  style="width:200px;margin-left:80%;margin-top: 10px">
                <el-pagination
                        layout="prev, pager, next"
                        :total="50">
                </el-pagination>
            </div>
        </div>
        <!--审核产品-->
        <el-dialog title="审核产品" :visible.sync="dialogeShow.checkDiolage" :modal="false" size="small" v-if="dialogeShow.checkDiolage">
            <productCheck></productCheck>
        </el-dialog>
        <!--编辑产品-->
        <el-dialog title="编辑产品" :visible.sync="dialogeShow.editDiolage" :modal="false" size="small" v-if="dialogeShow.editDiolage">
            <productEdit></productEdit>
        </el-dialog>
    </div>
</template>
<script>
    //富文本
    import '@/assets/ueditor/ueditor.config.js'
    import '@/assets/ueditor/ueditor.all.min.js'
    import '@/assets/ueditor/ueditor.parse.min.js'
    import '@/assets/ueditor/lang/zh-cn/zh-cn.js'
    import productCheck from '@/components/working/common/productCheck.vue'
    import productEdit from '@/components/working/common/productEdit.vue'
    export default{
        components:{productCheck,productEdit},
        data(){
            return{
                dialogeShow:{
                    checkDiolage:false,
                    editDiolage:false,
                },
                form: {
                    fzMan:'',
                    flag:'false',
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                    upS:'',
                    aboutField:''
                },
                tableData: [{
                    name:"常州天合能源管理有限公司",
                    type: '民营',
                    shangshi:"否",
                    field: '清洁能源',
                    power:"研发",
                    time:"2017.0705",
                    editMan:"王小虎",
                    manager:"王虎"
                },{
                    name:"常州天合能源管理有限公司",
                    type: '民营',
                    shangshi:"否",
                    field: '清洁能源',
                    power:"研发",
                    time:"2017.0705",
                    editMan:"王小虎",
                    manager:"王虎"
                }, {
                    name:"常州天合能源管理有限公司",
                    type: '民营',
                    shangshi:"否",
                    field: '清洁能源',
                    power:"研发",
                    time:"2017.0705",
                    editMan:"王小虎",
                    manager:"王虎"
                }, {
                    name:"常州天合能源管理有限公司",
                    type: '民营',
                    shangshi:"否",
                    field: '清洁能源',
                    power:"研发",
                    time:"2017.0705",
                    editMan:"王小虎",
                    manager:"王虎"
                }]
            }
        },
        methods:{
//            重置按钮
                resetForm(formName){
                this.$refs[formName].resetFields();
            },
            showDio(parram){
                this.dialogeShow[parram]=true
            },
            del() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            }
        }
    }
</script>
<style>
    .dateMsg{
        padding-left: 20px;
        color: red;
        padding:10px
    }
</style>